import React, { Component } from 'react';
import {
    Image,
    View,
    Dimensions,
    StyleSheet,
    Platform,
    WebView,
    ScrollView
} from 'react-native';
import Echarts from 'native-echarts';
import STRING from '../../const_string_zh_CN';
import URL from '../../net/url.js';
import { NavigationActions } from 'react-navigation'
import { connect } from 'react-redux';
import echarts from '../../net/echarts.js';
import { Container, Thumbnail, Text, Button, Icon, Body, List, ListItem, Content, Spinner } from 'native-base';
const { width, height } = Dimensions.get('window');
const marginTop = Platform.OS === 'ios' ? 20 : 0;
var YesterdayArray = []
var WeekArray = []
var MonthArray = []
export default class question_teacher extends Component {
    static navigationOptions = ({ navigation }) => ({
        title: navigation.state.params.title,
    });
    //js组件的构造函数，js的生命周期
    constructor(props) {
        super(props);
        //state内部维护的一个状态，我们刚开始进来的为空，来加载空的view
        this.state = {
            content: null,
            Yesterday: null,
            Week: null,
            Month: null,
        };
    }
    render() {

        const option = {
            title: {

            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['昨天', '一周前', '一月前']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: '昨天',
                    type: 'line',
                    data: this.state.Yesterday
                },
                {
                    name: '一周前',
                    type: 'line',
                    data: this.state.Week
                },
                {
                    name: '一月前',
                    type: 'line',
                    data: this.state.Month
                },

            ]
        };
        if ((!this.state.content)) {
            return this.renderLoadingView();
        }
        return (
            <ScrollView ref={(scrollView) => { _scrollView = scrollView; }}>
                <Content style={StyleSheet.flatten(styles.Content)}>
                    <Echarts option={option} height={300} width={width} />
                </Content>
            </ScrollView>

        );
    }
    //加载等待的view
    renderLoadingView() {
        return (
            <Container>
                <Content>
                    <Spinner color='green' />
                </Content>
            </Container>
        );
    }
  async componentDidMount() {
        let Echarts = new echarts();
        let OnlineRealTimeStatistics = await Echarts.getOnlineRealTimeStatistics();
        let YesterdayArray = []
        let WeekArray = []
        let MonthArray = []
        for (let i = 1; i < 25; i++) {
            let time1 = 'Hour' + i
            console.log('time1');
            console.log(OnlineRealTimeStatistics[0][time1]);
            YesterdayArray.push(OnlineRealTimeStatistics[0][time1]);
        }
        for (let i = 1; i < 25; i++) {
            let time1 = 'Hour' + i
            WeekArray.push(OnlineRealTimeStatistics[1][time1]);
        }
        for (let i = 1; i < 25; i++) {
            let time1 = 'Hour' + i
            MonthArray.push(OnlineRealTimeStatistics[2][time1]);
        }
        this.setState({
            content: OnlineRealTimeStatistics,
            Yesterday: YesterdayArray,
            Week: WeekArray,
            Month: MonthArray,
        });
    }

}
const styles = StyleSheet.create({
    button_default: {
        marginTop: 40,
        width: width / 4,
        height: 30,
        alignSelf: 'center',
        backgroundColor: 'white',
    },
    Content: {
        marginTop: 15,
        backgroundColor: 'white',
    },

    ListItem: {
        paddingLeft: 60,
        height: 40,
    },
    text_style: {
        //fontFamily:'微软雅黑',
        fontSize: 15,
        color: '#353535',
        // paddingLeft:15,
    },
    view: {
        marginTop: 15,
        backgroundColor: 'white',
        borderBottomWidth: 0.2,
        borderBottomColor: "#cac0c0",
    },
    flexbox: {
        marginTop: 15,
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'space-around',
        alignItems: 'center',
    },
});


